<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 20px">
      <el-form>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="选择门店：">
              <el-select
                style="width: 70%"
                v-model="search.name"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="新城点" value="2"> </el-option>
                <el-option label="高新店" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择职务：">
              <el-select
                style="width: 70%"
                v-model="search.post"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="收银" value="2"> </el-option>
                <el-option label="关门" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交班时间：">
              <el-date-picker
                style="width: 70%"
                v-model="search.time"
                @change="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                align="left"
              >
              </el-date-picker
            ></el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="box_item">
              <el-button class="button_item_box" @click="NearlyMonth(1)"
                >今天</el-button
              >
              <el-button class="button_item_box" @click="NearlyMonth(2)"
                >昨天</el-button
              >
              <el-button class="button_item_box" @click="NearlyMonth(3)"
                >近七天</el-button
              >
              <el-button class="button_item_box" @click="NearlyMonth(4)"
                >本周</el-button
              >
              <el-button class="button_item_box" @click="NearlyMonth(5)"
                >本月</el-button
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="员工昵称：" class="width_100 display_flex">
              <el-input
                class="flex_1"
                v-model="search.username"
                placeholder="请输入员工昵称："
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button class="button" @click="inquire(1)">查询</el-button>
            <el-button class="button" @click="inquire(2)">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-button class="button_box" @click="Exe_add">导出</el-button>
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width=""> </el-table-column>
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="员工昵称" width="">
        </el-table-column>
        <el-table-column prop="rate" label="职务" width=""> </el-table-column>
        <el-table-column prop="rate" label="归属门店" width="">
        </el-table-column>
        <el-table-column prop="rate" label="交班时间" width="">
        </el-table-column>
        <el-table-column prop="rate" label="在线时间" width="">
        </el-table-column>
        <el-table-column prop="rate" label="订单金额（元）" width="">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >223.22</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="实收金额（元）" width="">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >223.22</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="退款金额（元）" width="">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >223.22</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="交易流水" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { testFun, tipsFun } from "../../util/request.js"
export default {
  data () {
    return {
      // 渠道选择

      dialogVisible: false,
      search: {},
      timeValue: "",
      timeState: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "大傻春",
          address: "上海市普陀区金沙江路 1518 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-04",
          name: "马冬梅",
          address: "上海市普陀区金沙江路 1517 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-01",
          name: "夏东海",
          address: "上海市普陀区金沙江路 1519 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        },
        {
          date: "2016-05-03",
          name: "秋千仞",
          address: "上海市普陀区金沙江路 1516 弄",
          time: "2023-10-28-9-00-00",
          type: "启动",
          rate: "0.22-0.6"
        }
      ],
      addTable: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      list_EXes: [], // 导出的数据

      SetDepartment: [] // 门店负责人
    }
  },
  methods: {
    Exe_add () {
      this.list_EXes
      if (this.list_EXes.length == 0) {
        this.$message({
          message: "最少选择一条数据"
        })
        return
      }
      console.log("导出成功")
    },
    // 多选导出
    handleSelectionChange (data) {
      console.log("多选导出的数据", data)
      this.list_EXes = data
    },
    inquire (val) {
      if (val == 1) {
        console.log("查询", this.search)
      } else {
        this.search = {}
      }
    },
    NearlyMonth (val) {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, "0")
      const day = String(now.getDate()).padStart(2, "0")
      const formattedDate = `${year}-${month}-${day} 23:59:59`

      if (val == 1) {
        const formattedDatey = `${year}-${month}-${day} 00:00:00`
        console.log("今天", formattedDatey, formattedDate)
      } else if (val == 2) {
        const yesterday = new Date(now)
        yesterday.setDate(now.getDate() - 1)
        yesterday.setHours(0, 0, 0, 0)
        const formattedDate = `${yesterday.getFullYear()}-${String(
          yesterday.getMonth() + 1
        ).padStart(2, "0")}-${String(yesterday.getDate()).padStart(
          2,
          "0"
        )} 23:59:59`
        const formattedDatey = `${yesterday.getFullYear()}-${String(
          yesterday.getMonth() + 1
        ).padStart(2, "0")}-${String(yesterday.getDate()).padStart(
          2,
          "0"
        )} 00:00:00`
        console.log("昨天到今天的时间", formattedDatey, formattedDate)
      } else if (val == 3) {
        const sevenDaysAgo = new Date(now)
        sevenDaysAgo.setDate(now.getDate() - 7)
        const formattedDatey = `${sevenDaysAgo.getFullYear()}-${String(
          sevenDaysAgo.getMonth() + 1
        ).padStart(2, "0")}-${String(sevenDaysAgo.getDate()).padStart(
          2,
          "0"
        )} 00:00:00`
        console.log("七天前", formattedDatey, "今天", formattedDate)
      } else if (val == 4) {
        const currentDayOfWeek = now.getDay()
        const monday = new Date(year, month - 1, day - currentDayOfWeek + 1)
        const formattedDate = `${monday.getFullYear()}-${String(
          monday.getMonth() + 1
        ).padStart(2, "0")}-${String(monday.getDate()).padStart(
          2,
          "0"
        )} 23:59:59`
        console.log(formattedDate, formattedDate)
      } else {
        const firstDayOfMonth = new Date(year, month - 1, 1)
        const TimeOfTheMonth = `${firstDayOfMonth.getFullYear()}-${String(
          firstDayOfMonth.getMonth() + 1
        ).padStart(2, "0")}-${String(firstDayOfMonth.getDate()).padStart(
          2,
          "0"
        )} 23:59:59`
        console.log(TimeOfTheMonth, formattedDate)
      }
    },
    clearFn () {
      this.search = {}
    },
    time () {
      if (this.timeState == 1) {
        delete this.search.add_time
        this.search.over_time = this.timeValue
      } else if (this.timeState == 2) {
        delete this.search.over_time
        this.search.add_time = this.timeValue
      }
    }
  }
}
</script>
<style scoped>
.box_item {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.button_item_box {
  padding: 0 !important;
  font-size: 12px;
  width: 40px;
  height: 30px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #3f75ff;
  color: #3f75ff;
}
/deep/ .el-table__cell {
  text-align: center;
}
.centered-table th,
.centered-table td {
  text-align: center;
}

.add_cb {
  width: 110px;
  height: 32px;
  background: #3f75ff;
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}
.button_box {
  margin: 10px;
  color: #fff;
  width: 90px;
  height: 29px;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
}
.button {
  text-align: center;
  width: 58px;
  height: 33px;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
  color: #fff;
}
.time_box {
  display: flex;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
